<template>
  <div class="page-container">
    <!-- 搜索框：增加阴影和内边距，优化表单间距 -->
    <div class="search-card">
      <el-form
          inline
          :model="goodSearchM"
          ref="goodForm"
          class="search-form"
      >
        <el-form-item label="ID:" prop="id" class="form-item">
          <el-input v-model="goodSearchM.id" placeholder="请输入ID" size="default" />
        </el-form-item>
        <el-form-item label="姓名:" prop="name" class="form-item">
          <el-input v-model="goodSearchM.name" placeholder="请输入商品名" size="default" />
        </el-form-item>
      </el-form>
    </div>
    <!--按钮区-->
    <div class="button-group">
      <el-button type="primary" @click="search()" size="default" class="operate-btn">查询</el-button>
      <el-button type="primary" @click="add" size="default" class="operate-btn">添加</el-button>
      <el-button type="primary" @click="edit" size="default" class="operate-btn">修改</el-button>
      <el-button type="danger" @click="drop" size="default" class="operate-btn delete-btn">删除</el-button>
      <el-button type="default" @click="reset" size="default" class="operate-btn reset-btn">重置</el-button>
    </div>
    <!--  表格-->
    <div class="table-card">
      <el-table
          :data="goods"
          stripe
          style="width: 100%"
          @row-click="tblRClick"
          ref="tblR"
          row-class-name="table-row"
          size="default"
          @cell-click="handleCellClick"
      >
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column prop="id" label="ID" width="120" align="center" />
        <el-table-column label="商品图片" width="120" align="center">
          <template #default="scope">
            <div class="good-image-container">
              <el-image
                :src="scope.row.pic"
                class="good-image"
                fit="cover"
                :preview-src-list="[scope.row.pic]"
                preview-teleported
                v-if="scope.row.pic">
                <div slot="error" class="image-slot">
                  <i class="el-icon-picture-outline"></i>
                </div>
              </el-image>
              <div v-else class="no-image">
                <i class="el-icon-picture-outline"></i>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="name" label="商品名称" width="150" align="center" />
        <el-table-column label="分类名称" width="200" align="center">
          <template #default="scope">
            {{ categoryMap[scope.row.categoryId] || '未知分类' }}
          </template>
        </el-table-column>
        <el-table-column label="品牌名称" width="180" align="center">
          <template #default="scope">
            {{ brandMap[scope.row.brandId] || '未知品牌' }}
          </template>
        </el-table-column>
        <el-table-column prop="markPrice" label="建议售价" width="180" align="center" />
        <el-table-column prop="price" label="实售价" width="180" align="center" />
        <el-table-column prop="createdTime" label="创建日期" width="180" align="center" :formatter="formatDate">
          <template #default="scope">{{ scope.row.createdTime || '无' }}</template>
        </el-table-column>
        <el-table-column prop="qty" label="库存数量" width="180" align="center" />
        <el-table-column label="是否下架" width="180" align="center">
          <template #default="scope">
            <!-- 使用 formatter 函数来决定显示“是”还是“否” -->
            <span
                class="status-tag"
                :class="{ 'status-down': scope.row.isTakeDown, 'status-up': !scope.row.isTakeDown }"
            >
        {{ formatStatus(scope.row.isTakeDown) }}
      </span>
          </template>
        </el-table-column>
        <el-table-column prop="description" label="备注" width="180" align="center" />
        <el-table-column label="操作" width="120" align="center">
          <template #default="scope">
            <el-button type="danger" @click="handleTableEdit(scope.row)"
                       size="small" class="operate-btn">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 分页 -->
    <div class="pagination-container">
      <el-pagination
          background
          layout="total,prev,pager,next,jumper"
          :total="goodsPi.total"
          v-model:current-page="goodsPi.pageNo"
          v-model:page-size="goodsPi.pageSize"
          :page-sizes="[10,20,30,50]"
          @current-change="goodsPiChange"
      />
    </div>
    <!-- 添加/修改对话框：优化表单布局和间距 -->
    <el-dialog
        :title="goodDTitle"
        v-model="goodDShow"
        width="600px"
        :before-close="handleDialogClose"
    >
      <el-form
          label-width="120px"
          label-position="right"
          :model="goodModel"
          ref="memberFormRef"
          class="dialog-form"
          :rules="formRules"
      >
        <el-row :gutter="20"> <!-- 增加列间距 -->
          <el-col :span="16"> <!-- 单列布局，避免内容拥挤 -->
            <el-form-item label="商品名称:" prop="name" class="dialog-form-item">
              <el-input v-model="goodModel.name" placeholder="请输入商品名" size="default" />
            </el-form-item>
            <el-form-item label="分类:" prop="categoryId" class="dialog-form-item">
              <el-select
                  v-model="goodModel.categoryId"
                  placeholder="请选择服务项目"
                  size="default"
                  style="width: 100%"
                  required
              >
                <el-option
                    v-for="service in categoryList"
                    :key="service.id"
                    :label="service.name"
                    :value="service.id"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="品牌:" prop="brandId" class="dialog-form-item">
              <el-select
                  v-model="goodModel.brandId"
                  placeholder="请选择服务项目"
                  size="default"
                  style="width: 100%"
                  required
              >
                <el-option
                    v-for="service in brandList"
                    :key="service.id"
                    :label="service.name"
                    :value="service.id"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item  prop="avatar" class="dialog-form-item">
              <el-upload
                  class="avatar-uploader"
                  :http-request="handleAvatarUpload"
                  :show-file-list="false"
                  :headers="headers">
                <img v-if="goodModel.pic" :src="goodModel.pic" class="pic"/>
                <el-icon v-else class="avatar-uploader-icon">
                  <Plus/>
                </el-icon>
              </el-upload>
            </el-form-item>
            <!-- 新增：第二张主图上传 -->
            <el-form-item label="第二张主图:" prop="pic2" class="dialog-form-item">
              <el-upload
                  class="avatar-uploader"
                  :http-request="handleAvatarUpload2"
                  :show-file-list="false">
                <img v-if="goodModel.pic2" :src="goodModel.pic2" class="pic"/>
                <el-icon v-else class="avatar-uploader-icon"><Plus/></el-icon>
              </el-upload>
            </el-form-item>
          </el-col>
        </el-row>
            <el-form-item label="建议售价:" prop="markPrice" class="dialog-form-item">
              <el-input v-model.number="goodModel.markPrice" placeholder="请输入建议售价" size="default" type="number"/>
            </el-form-item>
            <el-form-item label="实际价格:" prop="price" class="dialog-form-item">
              <el-input v-model.number="goodModel.price" placeholder="请输入实际价格" size="default" type="number"/>
            </el-form-item>
            <el-form-item label="库存数量:" prop="qty" class="dialog-form-item">
              <el-input v-model.number="goodModel.qty" placeholder="请输入库存数量" size="default" type="number" step="1"/>
            </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="goodDShow = false" size="default">取消</el-button>
          <el-button type="primary" @click="doSubmit" size="default">保存</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>
<script setup >
import {onMounted, ref,reactive,toRaw} from "vue";
import {ElMessage,ElMessageBox} from "element-plus";
import api from "@/util/api.js";
import {Plus} from "@element-plus/icons-vue";
import {
  getGoods,
  createGood,
  updateGood,
  deleteGoods,
  getCategoryAndBrand,
  uploadGoodPortrait
} from "@/api/good.js";
import { getJwt } from "@/api/jwt.js"; // 引入JWT工具

onMounted(async () => {
  await search();
  await getCategoryList();
});
let goodDShow = ref(false);
let goodDTitle = ref("添加商品");
let mod = "add";
//品牌/分类下拉数据
let categoryList = ref([]);
let brandList = ref([]);
//关键：ID 与 名称的映射对象
let brandMap = ref({});
let categoryMap=ref({});
let memberFormRef = ref();
let tblR = ref();
let goods = ref([]);
let goodsPi = reactive({
  total: 0,
  pageNo: 1,
  pageSize: 10
});
let goodModel = ref({
  id: null,
  name: null,
  categoryId: null,
  brandId: null,
  markPrice: null,
  price: null,
  qty:null,
  description: null,
  pic: null,
  pic2: null,
  detail_pics: [],
  createdTime: null
})
let goodSearchM = ref({
  id: null,
  name: null
})
// 在 script 开头、变量定义区域新增以下代码
const formRules = ref({
  // 商品名称：必填
  name: [
    { required: true, message: "请输入商品名称", trigger: "blur" }
  ],
  // 分类：必填
  categoryId: [
    { required: true, message: "请选择商品分类", trigger: "change" }
  ],
  // 品牌：必填
  brandId: [
    { required: true, message: "请选择商品品牌", trigger: "change" }
  ],
  // 建议售价：必填 + 数字 + 非负
  markPrice: [
    { required: true, message: "请输入建议售价", trigger: "blur" },
    { type: "number", message: "请输入有效的数字", trigger: "blur" },
    {
      validator: (rule, value, callback) => {
        if (value < 0) {
          callback(new Error("建议售价不能为负数"));
        } else {
          callback();
        }
      },
      trigger: "blur"
    }
  ],
  // 实售价：必填 + 数字 + 非负
  price: [
    { required: true, message: "请输入实际售价", trigger: "blur" },
    { type: "number", message: "请输入有效的数字", trigger: "blur" },
    {
      validator: (rule, value, callback) => {
        if (value < 0) {
          callback(new Error("实际售价不能为负数"));
        } else {
          callback();
        }
      },
      trigger: "blur"
    }
  ],
  // 库存：必填 + 数字 + 非负（库存是整数，额外加整数校验）
  qty: [
    { required: true, message: "请输入库存数量", trigger: "blur" },
    { type: "number", message: "请输入有效的数字", trigger: "blur" },
    {
      validator: (rule, value, callback) => {
        if (!Number.isInteger(value)) {
          callback(new Error("库存数量必须是整数"));
        } else if (value < 0) {
          callback(new Error("库存数量不能为负数"));
        } else {
          callback();
        }
      },
      trigger: "blur"
    }
  ]
});
// 1. 新增：状态格式化函数（true -> '是', false -> '否'）
const formatStatus = (isTakeDown) => {
  return isTakeDown ? '是' : '否';
};

// 2. 新增：单元格点击事件处理函数
// 替换后的单元格点击事件（复用updateGood接口）
const handleCellClick = async (row, column) => {
  // 只处理“是否下架”列的点击
  if (column.label === '是否下架') {
    const currentStatus = row.isTakeDown;
    const newStatus = !currentStatus; // 切换状态：true→false / false→true
    const statusText = newStatus ? '下架' : '上架'; // 状态文字描述

    // 1. 询问用户确认操作
    try {
      await ElMessageBox.confirm(
          `确定要将商品【${row.name}】${statusText}吗？`,
          '状态修改',
          {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
          }
      );

      // 2. 调用已有的修改接口（updateGood），只传必要参数
      const updateParams = {
        id: row.id, // 必须传：商品ID（定位要修改的商品）
        isTakeDown: newStatus // 只传要修改的“上下架状态”，其他参数不传递
      };

      const resp = await updateGood(updateParams); // 复用你的修改商品接口

      // 3. 处理接口响应
      if (resp.success) {
        row.isTakeDown = newStatus; // 前端即时更新状态，无需刷新列表
        ElMessage.success(`商品【${row.name}】已成功${statusText}`);
      } else {
        ElMessage.error(`状态修改失败：${resp.msg || '未知错误'}`);
      }
    } catch (error) {
      // 捕获“用户取消”或“接口异常”
      if (error.name !== 'Cancel') { // 排除“用户取消”的情况
        console.error('上下架状态修改异常：', error);
        ElMessage.error('网络异常，状态修改失败');
      }
    }
  }
};
// 新增：日期格式化函数
const formatDate = (row) => {
  // row.createdTime 就是当前行的 createdTime 数据
  const dateString = row.createdTime;

  // 如果数据为空，则返回 '无'
  if (!dateString) {
    return '无';
  }

  // 将字符串转换为 Date 对象
  const date = new Date(dateString);

  // 如果转换失败（例如数据格式不正确），则返回原始数据
  if (isNaN(date.getTime())) {
    return dateString;
  }

  // 使用 toLocaleString 进行格式化，这是最简单的方法
  // 它会根据浏览器的语言环境进行格式化，在中文环境下通常就是 'YYYY/MM/DD HH:mm:ss'
  return date.toLocaleString();
};
function tblRClick (row){
  tblR.value.toggleRowSelection(row);
};
const handleTableEdit = (row)=>{
};
function goodsPiChange(pageNo, pageSize) {
  search(pageNo, pageSize);
}
function add(){
  mod = "add";
  goodDTitle.value = "添加商品";
  goodModel.value ={
    id: null,
    name: null,
    categoryId: null,
    brandId: null,
    markPrice: null,
    price: null,
    qty:null,
    description: null,
    pic: null,
    pic2: null,
    detail_pics: []
  }
  resetPendingGoodImage();
  goodDShow.value = true;
}
function edit(){
  let selectionRows = tblR.value.getSelectionRows();
  if(selectionRows.length==0){
    ElMessage.warning("请选择要修改的行");
  }else if(selectionRows.length>1){
    ElMessage.warning("只能选择一行进行修改");
  }else{
    mod = "edit";
    goodDTitle.value = "修改商品";
    const row = selectionRows[0];
    const detailPicsArray = row.detail_pics?row.detail_pics.split(","):[];
    goodModel.value = {
      id: row.id,
      name: row.name,
      categoryId: row.categoryId,
      brandId: row.brandId,
      markPrice: row.markPrice,
      price: row.price,
      qty:row.qty,
      description: row.description,
      pic: row.pic,
      pic2: row.pic2,
      detail_pics: detailPicsArray
    };
    goodDShow.value = true;
  }
}
//添加变量临时存储图片
// 添加一个新的变量来存储待上传的头像文件
let pendingAvatarFile = ref(null);
let pendingAvatarFile2 = ref(null);
let pendingDetailFiles = ref([]);

// 3. 修复：图片选择逻辑（保留本地预览，新增文件暂存）
async function handleAvatarUpload(options) {
  const { file } = options;
  // 暂存文件（关键：提交时才上传）
  pendingAvatarFile.value = file;

  // 本地预览（原有逻辑保留）
  const reader = new FileReader();
  reader.onload = (e) => {
    goodModel.value.pic = e.target.result; // 本地预览URL（data:开头）
  };
  reader.readAsDataURL(file);

  ElMessage.info("图片已选择，保存商品时自动上传");
}
async function handleAvatarUpload2(options) {
  const { file } = options;
  // 暂存文件（关键：提交时才上传）
  pendingAvatarFile2.value = file;

  // 本地预览（原有逻辑保留）
  const reader = new FileReader();
  reader.onload = (e) => {
    goodModel.value.pic2 = e.target.result; // 本地预览URL（data:开头）
  };
  reader.readAsDataURL(file);

  ElMessage.info("图片2已选择，保存商品时自动上传");
}
async function handleDetailUpload(options,index) {
  const { file } = options;
  // 暂存文件（关键：提交时才上传）
  pendingDetailFiles.value[index] = file;

  // 本地预览（原有逻辑保留）
  const reader = new FileReader();
  reader.onload = (e) => {
    goodModel.value.detail_pics[index] = e.target.result; // 本地预览URL（data:开头）
  };
  reader.readAsDataURL(file);

  ElMessage.info("第 ${index + 1} 张详情图已选择，保存时自动上传");
}


// 4. 补充：图片上传工具方法（参考第二个页面的 uploadAvatarAndGetUrl）
// 上传图片工具方法（修正：添加id参数）
async function uploadGoodImageAndGetUrl(file, goodId) {
  try {
    const formData = new FormData();
    formData.append("file", file); // 对应后端的@RequestParam("file")
    formData.append("id", goodId); // 关键：传递商品ID，对应后端的@RequestParam("id")

    const resp = await uploadGoodPortrait(formData);
    if (resp.success) {
      return resp.data; // 返回图片URL
    } else {
      ElMessage.error(resp.msg || "图片上传失败");
      return null;
    }
  } catch (error) {
    ElMessage.error("图片上传异常：" + error.message);
    return null;
  }
}


// 5. 补充：清理本地预览和暂存文件（参考第二个页面的 resetPendingAvatar）
function resetPendingGoodImage() {
  pendingAvatarFile.value = null; // 清空暂存文件
  pendingAvatarFile2.value = null;
  pendingDetailFiles.value = [];
  // 只清理本地预览URL（避免清除服务器已存在的图片URL）
  if (goodModel.value.pic && goodModel.value.pic.startsWith("data:")) {
    goodModel.value.pic = null;
  }
  if (goodModel.value.pic2 && goodModel.value.pic2.startsWith("data:")) {
    goodModel.value.pic2 = null;
  }
}
// 添加/修改 对话框关闭
function handleDialogClose(){
  goodDShow.value = false;
  resetPendingGoodImage();
}
// 提交添加/修改
// 提交添加/修改
async function doSubmit() {
  // 1. 先触发表单验证，验证不通过则不提交
  const formRef = memberFormRef.value;
  if (!formRef) return;

  try {
    await formRef.validate();
  } catch (error) {
    ElMessage.error("表单填写有误，请检查后重试");
    return;
  }

  // 准备一个包含所有最终数据的 payload 对象
  const payload = { ...toRaw(goodModel.value) };

  // 如果是修改操作，流程不变
  if (mod === "edit") {
    try {
      // 上传图片并更新 payload
      if (pendingAvatarFile.value) {
        const picUrl = await uploadGoodImageAndGetUrl(pendingAvatarFile.value, payload.id);
        if (picUrl) payload.pic = picUrl;
      }
      if (pendingAvatarFile2.value) {
        const pic2Url = await uploadGoodImageAndGetUrl(pendingAvatarFile2.value, payload.id);
        if (pic2Url) payload.pic2 = pic2Url;
      }
      const detailUrls = [];
      for (const file of pendingDetailFiles.value) {
        if (file) {
          const detailUrl = await uploadGoodImageAndGetUrl(file, payload.id);
          if (detailUrl) detailUrls.push(detailUrl);
        }
      }
      if (detailUrls.length > 0) {
        payload.detailPics = detailUrls.join(',');
      }

      // 执行更新
      const resp = await updateGood(payload);
      if (resp.success) {
        ElMessage.success("修改商品成功");
        goodDShow.value = false;
        search();
      } else {
        ElMessage.error("保存失败：" + (resp.msg || "未知错误"));
      }
    } catch (error) {
      console.error("提交失败:", error);
      ElMessage.error("提交失败：" + (error.message || "网络异常"));
    }
    return; // 结束修改流程
  }

  // --- 以下是新增商品的核心修改逻辑 ---
  if (mod === "add") {
    try {
      // 步骤 1：创建一个没有图片的“空”商品，以获取ID
      // 复制一份payload，并删除所有图片相关的字段
      const goodWithoutImages = { ...payload };
      delete goodWithoutImages.pic;
      delete goodWithoutImages.pic2;
      delete goodWithoutImages.detail_pics;

      const createResp = await api({
        url: "/goods/pass",
        method: "PUT",
        data: goodWithoutImages
      });

      if (!createResp.success) {
        ElMessage.error("创建商品失败：" + (createResp.msg || "未知错误"));
        return;
      }

      // 从响应中获取新创建的商品ID
      const newGoodId = createResp.data;
      if (!newGoodId) {
        ElMessage.error("未能获取新商品ID，无法继续上传图片");
        return;
      }
      ElMessage.success("商品创建成功，正在上传图片...");

      // 步骤 2：使用新获取的ID上传所有图片
      const imageUpdateData = { id: newGoodId };

      if (pendingAvatarFile.value) {
        const picUrl = await uploadGoodImageAndGetUrl(pendingAvatarFile.value, newGoodId);
        if (picUrl) imageUpdateData.pic = picUrl;
      }
      if (pendingAvatarFile2.value) {
        const pic2Url = await uploadGoodImageAndGetUrl(pendingAvatarFile2.value, newGoodId);
        if (pic2Url) imageUpdateData.pic2 = pic2Url;
      }
      const detailUrls = [];
      for (const file of pendingDetailFiles.value) {
        if (file) {
          const detailUrl = await uploadGoodImageAndGetUrl(file, newGoodId);
          if (detailUrl) detailUrls.push(detailUrl);
        }
      }
      if (detailUrls.length > 0) {
        imageUpdateData.detailPics = detailUrls.join(',');
      }

      // 步骤 3：将图片URL更新到新创建的商品上
      const updateResp = await api({
        url: "/goods/pass",
        method: "POST",
        data: imageUpdateData
      });

      if (updateResp.success) {
        ElMessage.success("新增商品成功！");
        goodDShow.value = false;
        search();
      } else {
        ElMessage.error("更新商品图片信息失败：" + (updateResp.msg || "未知错误"));
        // 可选：在这里可以添加一个回滚逻辑，删除刚刚创建的“空”商品
      }
    } catch (error) {
      console.error("新增商品提交失败:", error);
      ElMessage.error("提交失败：" + (error.message || "网络异常"));
    }
  }
}
// 删除
async function drop(){
  let selectionRows = tblR.value.getSelectionRows();
  if(selectionRows.length==0){
    ElMessage.warning("请选择要删除的行");
  }else{
    ElMessageBox.confirm(`是否删除所选${selectionRows.length}条数据？`,
        "提示",
        {
          confirmButtonText:"确定",
          cancelButtonText:"取消",
          type:"warning"
        }
    ).then(async()=>{
      let ids = selectionRows.map(item=>item.id);
      let resp = await api({
        url: "/goods/pass",
        method: "delete",
        data: ids
      });
      if(resp.success){
        ElMessage.success(`删除成功，共删除${resp.data.data}条数据`)
        search();
      }else{
        ElMessage.error("删除失败，请稍后重试！");
      }
    }).catch(()=>{});
  }
}
// 重置
async function reset(){
  goodSearchM.value={
    id: null,
    name: null
  }
  resetPendingGoodImage();
  search(1,10);
}
// 查询
async function search(pageNo = goodsPi.pageNo, pageSize = goodsPi.pageSize) {
  let params = toRaw(goodSearchM.value);
  try {
    let resp = await api({
      url: "/goods/pass",
      method: "get",
      params: {
        pageNo,
        pageSize,
        ...params
      }
    });
    console.log("Good页面search"+resp);
    goods.value = resp.data.records;
    goodsPi.total = resp.data.total;
    goodsPi.pageNo = pageNo;
    goodsPi.pageSize = pageSize;
  } catch (err) {
    ElMessage.error("数据加载失败：" + (err.msg || "网络异常"));
  }
}
//分类查询
// 6. 修复：分类/品牌下拉数据加载和ID-名称映射
async function getCategoryList() {
  try {
    const resp = await getCategoryAndBrand();
    if (resp.success) {
      console.log("分类和品牌数据:", resp.data);

      // 1. 【修复】正确赋值下拉列表
      // 假设后端返回的数据结构是 { categories: [...], brands: [...] }
      categoryList.value = resp.data.categories || [];
      brandList.value = resp.data.brands || [];

      // 2. 【修复】正确构建ID-名称映射（核心！）
      // 遍历分类列表，创建 {分类ID: 分类名称} 的映射对象
      categoryMap.value = categoryList.value.reduce((map, item) => {
        map[item.id] = item.name;
        return map;
      }, {});

      // 遍历品牌列表，创建 {品牌ID: 品牌名称} 的映射对象
      brandMap.value = brandList.value.reduce((map, item) => {
        map[item.id] = item.name;
        return map;
      }, {});

    } else {
      ElMessage.error("分类/品牌数据加载失败：" + (resp.msg || "未知错误"));
    }
  } catch (error) {
    ElMessage.error("分类/品牌数据加载异常：" + error.message);
    console.error("getCategoryList 错误:", error);
  }
}
</script>

<style>

/* 为状态标签添加样式 */
.status-tag {
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 14px;
  cursor: pointer; /* 鼠标悬停时显示手型，提示可点击 */
  transition: all 0.2s;
}

/* 下架状态（true）- 显示红色 */
.status-down {
  background-color: #fef0f0;
  color: #f56c6c;
  border: 1px solid #fbc4c4;
}

/* 上架状态（false）- 显示绿色 */
.status-up {
  background-color: #f0f9eb;
  color: #67c23a;
  border: 1px solid #b3e19d;
}

.status-tag:hover {
  opacity: 0.8;
}
/* ... 你已有的样式 ... */

/* --- 修改开始 --- */

/* 详情图容器：横向排列，增加间距 */
.detail-pics-container {
  display: flex;
  gap: 16px;
  margin-top: 8px;
  flex-wrap: wrap; /* 如果图片多，可以换行 */
}

/* 单个详情图上传框的大小 */
.detail-pic-uploader {
  width: 120px;
  height: 120px;
}

/* --- 修改结束 --- */
/* 1. 图片上传容器：固定宽高，居中显示 */
.avatar-uploader {
  width: 100%; /* 继承 el-col 的宽度（8分栏宽度） */
  height: 180px; /* 固定高度，可根据需求调整（如150px/200px） */
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  border: 1px dashed #dcdfe6; /* 加虚线边框，提示“点击上传” */
  border-radius: 4px; /* 圆角优化 */
  overflow: hidden; /* 关键：隐藏超出容器的图片部分 */
  background-color: #f5f7fa; /* 浅色背景，区分上传区域 */
  cursor: pointer;
}

/* 2. 预览图片：按比例缩放，不超出容器 */
.avatar-uploader .pic {
  width: 100%; /* 图片宽度铺满容器 */
  height: 100%; /* 图片高度铺满容器 */
  object-fit: contain; /* 关键：按图片原始比例缩放，不拉伸，空白处显示背景色 */
  /* 可选：object-fit: cover; 会填满容器（可能裁剪图片边缘），根据需求选择 */
}

/* 3. 未选择图片时的图标样式：控制图标大小和颜色 */
.avatar-uploader .avatar-uploader-icon {
  font-size: 24px; /* 图标大小 */
  color: #c0c4cc; /* 图标颜色 */
}
.search-form {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  width: 100%;
}

.search-form .el-form-item {
  margin-bottom: 0;
}
.search-card {
  background: #fff;
  display: flex;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  padding: 16px 20px;
  margin-bottom: 20px;
}
.page-container {
  padding: 20px;
  max-width: 1400px;
  margin: 0 auto;
  box-sizing: border-box;
}
.table-card {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  padding: 10px;
  margin-bottom: 20px;
  overflow: hidden;
}
.table-row {
  cursor: pointer;
}
/* 商品图片样式 */
.good-image-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 60px;
}
.good-image {
  width: 60px;
  height: 60px;
  border-radius: 4px;
}
.no-image {
  width: 60px;
  height: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f5f7fa;
  color: #c0c4cc;
  border-radius: 4px;
}
.good-image .el-image__error {
  font-size: 20px;
}
/* 分页：固定底部，居中显示 */
.pagination-container {
  background-color: aquamarine;
  margin-top: 20px;
  padding: 10px 20px; /* 增加左右内边距，避免内容贴边 */
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  /* 关键：使用 flex 布局，强制不换行，垂直居中 */
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  flex-wrap: nowrap; /* 强制所有元素在一行显示，不换行 */
}
.pagination-container .el-pagination {
  display: flex !important; /* 强制保持弹性布局 */
  align-items: center !important;
  gap: 8px; /* 控制分页元素间的间距 */
  width: auto !important; /* 避免分页容器被拉伸导致元素分散 */
}

</style>